<template>
    <div>
        <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="() => { $router.push('/home/index') }" />
        <van-row>
            <van-col span="8"> <van-sidebar v-model="active">
                    <van-sidebar-item title="为你推荐" />
                    <van-sidebar-item title="品牌墙" />
                    <van-sidebar-item title="生鲜蔬果" />
                    <van-sidebar-item title="食品饮料" />
                    <van-sidebar-item title="粮油调味" />
                    <van-sidebar-item title="美妆护肤" />
                    <van-sidebar-item title="个护清洁" />
                    <van-sidebar-item title="日用百货" />
                    <van-sidebar-item title="医药保健" />
                    <van-sidebar-item title="手机数码" />
                </van-sidebar></van-col>
            <van-col span="8">
                <van-row :gutter="[20, 60]">
                    <van-col span="12"><img src="../../images/1.png" alt="" style="width: 100px; height: 100px;" @click="sp">面膜</van-col>
                     <van-col span="12"><img src="../../images/2.png" alt="" style="width: 100px; height: 100px;" @click="sp">饮料/水</van-col>
                     <van-col span="12"><img src="../../images/3.png" alt="" style="width: 100px; height: 100px;" @click="sp">蔬菜</van-col>
                     <van-col span="12"><img src="../../images/4.png" alt="" style="width: 100px; height: 100px;" @click="sp">水果</van-col>
                     <van-col span="12"><img src="../../images/5.png" alt="" style="width: 100px; height: 100px;" @click="sp">方便面/米</van-col>
                     <van-col span="12"><img src="../../images/6.png" alt="" style="width: 100px; height: 100px;" @click="sp">调味品</van-col>
                </van-row>
            </van-col>

        </van-row>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router =useRouter()
const active = ref(1);
const sp=()=>{
     router.push('/sp')
}
</script>

<style lang="scss" scoped></style>